<template>
  <keep-alive>
    <div class="count">
      <span>
        <button @click.prevent="subclick"
                class="addbtn"
                :class="this.listitem.count === 0 ? 'isactive' : 'anticonn'">
          <a-icon type="minus-circle" />
        </button>
        <input type="button"
               value="0"
               v-model="listitem.count">
        <button @click="addclick"
                :class="this.listitem.count === this.listitem.inventory ? 'isactive' : 'anticonn'">
          <a-icon type="plus-circle" />
        </button>
      </span>
    </div>
  </keep-alive>
</template>

<script>
export default {
  data: function () {
    return {}
  },
  beforeMount () { },
  methods: {
    addclick () {
      // 点击让count自增
      // if (this.listitem.count >= this.listitem.inventory) {
      //   this.listitem.count = this.listitem.inventory
      //   return false // 如果超过剩余数量就不能自增了
      // }
      this.listitem.count++
      let foodlist = {
        goods_name: this.listitem.goods_name,
        id: this.listitem.id,
        num: this.listitem.count,
        price: this.listitem.price,
        unit: this.listitem.unit,
        picture: this.listitem.goods_picture,
        type_id: this.listitem.time_frame,
        time_frame: this.listitem.time_frame
        // type_id: this.listitem.goods_type_id
      }
      this.$store.commit('addToCar', foodlist) // 把菜品的信息放在vuex里
    },
    subclick () {
      // 点击让count自减
      if (this.listitem.count <= 0) {
        this.listitem.count = 0
        return false // 如果小于等于0就不能自减了
      }
      this.listitem.count--
      let foodlist = null
      if (this.listitem.count === 0) {
        foodlist = {
          goods_name: this.listitem.goods_name,
          id: this.listitem.id,
          num: this.listitem.count,
          price: this.listitem.price,
          unit: this.listitem.unit,
          picture: this.listitem.goods_picture,
          type_id: this.listitem.time_frame,
          time_frame: this.listitem.time_frame,
          currentNum: 0
        }
      } else {
        foodlist = {
          goods_name: this.listitem.goods_name,
          id: this.listitem.id,
          num: this.listitem.count,
          price: this.listitem.price,
          unit: this.listitem.unit,
          picture: this.listitem.goods_picture,
          type_id: this.listitem.time_frame,
          time_frame: this.listitem.time_frame
        }
      }
      this.$store.commit('subToCar', foodlist) // 把菜品的信息放在vuex里
    }
  },
  computed: {},
  props: {
    listitem: {
      type: Object
    }
  },
  watch: {}
}
</script>

<style lang="stylus" scoped>
@import '../../../../static/css/color.styl'
.count
  display inline-block
  float right
  margin-right 0.2rem
  input, button
    display inline
    background-color #fff
.anticonn
  color $color-main
.isactive
  color #ccc
</style>
